<template>
	<sw-common-frame :loading="loading">
		<template slot="button">
			<el-button size="small" type="primary" icon="el-icon-plus" @click="handleOpenDialog()">新增</el-button>
			<el-divider direction="vertical"></el-divider>
			<el-radio-group size="small" v-model="listType">
				<el-radio-button label="1">黑名单</el-radio-button>
				<el-radio-button label="2">白名单</el-radio-button>
			</el-radio-group>
		</template>
		<template slot="query">
			<el-form size="small" :inline="true">
				<el-form-item>
					<el-input placeholder="请输入名称" v-model="queryData.name" clearable style="width: 150px"></el-input>
				</el-form-item>
				<el-form-item>
					<sw-ip-input placeholder="请输入IP地址" v-model="queryData.ipAddr" clearable style="width: 150px"></sw-ip-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="queryTableData()">搜索</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="table">
			<el-table size="medium" height="100%" :data="tableData" stripe>
				<el-table-column prop="name" label="名称" min-width="180"></el-table-column>
				<el-table-column prop="ipAddr" label="IP地址" min-width="180"></el-table-column>
				<el-table-column prop="createName" label="创建人" min-width="136"></el-table-column>
				<el-table-column prop="createTime" label="创建时间" min-width="160"></el-table-column>
				<el-table-column label="操作" width="100">
					<template slot-scope="{ row }">
						<el-button size="medium" type="text" @click="handleOpenDialog(row)">编辑</el-button>
						<el-button size="medium" type="text" @click="handleDeleteData(row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
		<template slot="page">
			<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData()"></sw-pagination>
		</template>
		<form-dialog v-model="formDialog" :type="listType" :data-id="dataId" @refresh="queryTableData()"></form-dialog>
	</sw-common-frame>
</template>

<script>
import formDialog from './form';
import systemMixins from '@/views/common/systemMixins';
import { getBlackPageList, deleteBlack } from '@/api/system/tbSysBlack';
export default {
	mixins: [systemMixins],
	components: { formDialog },
	data() {
		return {
			listType: '1'
		};
	},
	watch: {
		listType() {
			this.queryTableData();
		}
	},
	methods: {
		//获取黑白名单
		async getTableData() {
			let params = { ...this.queryData, type: this.listType };
			let result = await getBlackPageList(params).then((res) => res.data);
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.tableData = result.data || [];
			}
		},

		//删除用户数据
		handleDeleteData(data) {
			this.handleDeleteFunction(data.id, data.name, '名单');
		},

		//删除数据请求
		async deleteDataRequest(params) {
			let result = await deleteBlack(params).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('删除名单成功');
				this.queryTableData();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.apply_safe_body::v-deep {
	display: flex;
	flex-direction: column;
	position: relative;
	padding: 16px;
	flex: 1;
	overflow: hidden;
	.el-form {
		position: absolute;
		top: 16px;
		right: 16px;
		z-index: 1;
	}
	.el-form-item {
		margin-bottom: 0;
		&:last-child {
			margin-right: 0;
		}
	}
}
</style>
